import {Component, ElementRef, EventEmitter, Input, OnInit, Output, Renderer2, ViewChild} from '@angular/core';

@Component({
    selector: 'app-selector',
    templateUrl: './selector.component.html',
    styleUrls: ['./selector.component.css']
})
export class SelectorComponent implements OnInit {
    @Input()
    name: string;

    /**
     * 选中值
     */
    private _values: object[];

    /**
     * 备选项
     */
    private _options: object[];

    @Input()
    defaultValue: object;

    @Input()
    keyName: string;

    @Input()
    textName: string;

    /**
     * 类型：selector | button
     * @type {string}
     */
    @Input()
    type = 'selector';

    @Input()
    joiner = ',';

    @Input()
    multi = false;

    displayText: string;

    expandingClass = 'expanding';

    @ViewChild('selector') el: ElementRef;

    selectedOptions: object[];

    @Output() selected = new EventEmitter<object[]>();

    constructor(private renderer: Renderer2) {
    }

    ngOnInit() {
    }

    get options(): Object[] {
        return this._options;
    }

    @Input()
    set options(value: Object[]) {
        this._options = value;
        this.dataChange();
    }

    get values(): Object[] {
        return this._values;
    }

    @Input()
    set values(value: Object[]) {
        this._values = value;
        this.dataChange();
    }

    /**
     * 选中
     * @param {Object} clickedItem
     */
    selectOption(clickedItem: object) {
        if (this.multi) {
            if (this.selectedOptions.indexOf(clickedItem) > -1) {
                this.selectedOptions = this.selectedOptions.filter(item => clickedItem !== item);
            } else {
                this.selectedOptions.push(clickedItem);
            }
        } else {
            this.selectedOptions = [clickedItem];
            // 收起
            this.renderer.removeClass(this.el.nativeElement, this.expandingClass);
        }
        this.setSelectedTextIds();

        this.selected.emit(this.selectedOptions);
    }

    /**
     * 下拉或收起
     * @param event
     */
    dropUpAndDown(event: any) {
        const expanding = this.el.nativeElement.classList.contains(this.expandingClass);
        if (expanding) {
            this.renderer.removeClass(this.el.nativeElement, this.expandingClass);
        } else {
            this.renderer.addClass(this.el.nativeElement, this.expandingClass);
        }
    }

    private initSelectedObjs() {
        this.selectedOptions = [];
        if (this._values) {
            // 如果有默认值
            this._values.forEach(value => {
                this._options.forEach(option => {
                    if (value === option) {
                        this.selectedOptions.push(option);
                        return;
                    }
                    if (this.keyName && value === option[this.keyName]) {
                        this.selectedOptions.push(option);
                        return;
                    }
                });
            });
        } else {
            // 没有默认值
            if (this.defaultValue) {
                this.selectedOptions.push(this.defaultValue);
                return;
            }
            // 没有默认值
            this._options.forEach(option => {
                if (this.selectedOptions.length > 0) {
                    return;
                }
                this.selectedOptions.push(option);
            });
        }
    }

    onDefaultClick() {
        if (this.type !== 'button') {
            return;
        }
        this.selectOption(this.selectedOptions[0]);
    }

    private setSelectedTextIds() {
        this.displayText = '';
        this.selectedOptions.forEach(item => {
            if (this.displayText !== '') {
                this.displayText += this.joiner;
            }
            if (this.textName) {
                this.displayText += item[this.textName];
            } else {
                this.displayText += item;
            }
        });
    }

    private dataChange() {
        this.initSelectedObjs();
        this.setSelectedTextIds();
    }
}
